<template>
  <div class="container">
    <nav-header></nav-header>
    <!-- 面包屑 -->
    <nav-bread>
      <span>OrderConfirm</span>
    </nav-bread>
    <div class="checkout-order">
      <div class="page-title-normal">
        <h2 class="page-title-h2"><span>check out</span></h2>
      </div>
      <!-- process step -->
      <div class="check-step">
        <ul>
          <li class="cur"><span>Confirm</span> address</li>
          <li class="cur"><span>View your</span> order</li>
          <li><span>Make</span> payment</li>
          <li><span>Order</span> confirmation</li>
        </ul>
      </div>

      <!-- order list -->
      <div class="page-title-normal checkout-title">
        <h2><span>Order content</span></h2>
      </div>
      <div class="item-list-wrap confirm-item-list-wrap">
        <div class="cart-item order-item">
          <div class="cart-item-head">
            <ul>
              <li>Order contents</li>
              <li>Price</li>
              <li>Quantity</li>
              <li>Subtotal</li>
            </ul>
          </div>
          <ul class="cart-item-list">
            <li v-for="item in cartList" v-if="item.checked==1">
              <div class="cart-tab-1">
                <div class="cart-item-pic">
                  <img :src="'/static/'+item.productImage" alt="">
                </div>
                <div class="cart-item-title">
                  <div class="item-name">{{item.productName}}</div>

                </div>
              </div>
              <div class="cart-tab-2">
                <div class="item-price">{{item.salePrice|currency("$")}}</div>
              </div>
              <div class="cart-tab-3">
                <div class="item-quantity">
                  <div class="select-self">
                    <div class="select-self-area">
                      <span class="select-ipt">×{{item.productNum}}</span>
                    </div>
                  </div>
                  <div class="item-stock item-stock-no">In Stock</div>
                </div>
              </div>
              <div class="cart-tab-4">
                <div class="item-price-total">{{(item.salePrice*item.productNum)|currency("$")}}</div>
              </div>
            </li>
          </ul>
        </div>
      </div>

      <!-- Price count -->
      <div class="price-count-wrap">
        <div class="price-count">
          <ul>
            <li>
              <span>Item subtotal:</span>
              <span>{{subtotal|currency("$")}}</span>
            </li>
            <li>
              <span>Shipping:</span>
              <span>{{Shipping|currency("$")}}</span>
            </li>
            <li>
              <span>Discount:</span>
              <span>{{discount|currency("$")}}</span>
            </li>
            <li>
              <span>Tax:</span>
              <span>{{tax|currency("$")}}</span>
            </li>
            <li class="order-total-price">
              <span>Order total:</span>
              <span>{{orderTotal|currency("$")}}</span>
            </li>
          </ul>
        </div>
      </div>

      <div class="order-foot-wrap">
        <div class="prev-btn-wrap">
          <button class="btn btn--m">Previous</button>
        </div>
        <div class="next-btn-wrap">
          <button class="btn btn--m btn--red" @click="paySuccess">Proceed to payment</button>
        </div>
      </div>
    </div>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
import navHeader from "@/components/Header";
import navFooter from "@/components/Footer";
import navBread from "@/components/Bread";
import model from "@/components/Model";
import axios from "axios";
export default {
  data() {
    return {
      cartList: [],
      subtotal: 0,
      Shipping: 100,
      discount: 200,
      tax: 400,
      orderTotal: 0
    };
  },
  components: {
    navHeader,
    navFooter,
    navBread,
    model
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      axios.get("/users/cartList").then(response => {
        var res = response.data;
        if (res.status == 0) {
          this.cartList = res.result;
          this.cartList.forEach(ele => {
            if (ele.checked == 1) {
              this.subtotal += ele.salePrice * ele.productNum;
            }
            this.orderTotal =
              this.subtotal + this.Shipping - this.discount + this.tax;
          });
        }
      });
    },
    paySuccess() {
      var addressId = this.$route.query.addressId;
      console.log(addressId);
      axios
        .post("/users/successPay", {
          addressId: addressId,
          orderTotal: this.orderTotal
        })
        .then(response => {
          var res = response.data;
          if (res.status == 0) {
            // console.log("添加成功");
            this.$router.push({
              path: "/orderSuccess",
              query: { orderId: res.result.orderId }
            });
          }
        });
    }
  }
};
</script>

<style>
</style>
